import React, { Component } from 'react'
import { Table, Tag, Space } from 'antd';
import axios from "axios"
const columns = [
  {
    title: '姓名',
    dataIndex: 'name1',
    key: 'name',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },

  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
    
      <Space size="middle">
        <a>Invite</a>
        {
          record.flag? <a>Delete</a>:""
        }
      
      </Space>
    ),
  },
];


class Table1 extends Component {
   state = {
     arr:[],
     selectedRowKeys: [], // Check here to configure the default column
     loading: false,
   }
   start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  onSelectChange = (selectedRowKeys,b) => {
    //console.log( selectedRowKeys,b);
    this.setState({ selectedRowKeys });
    // console.log(this.state.arr)
    this.state.arr.forEach((item,index)=>{
        // console.log(item);
         b.forEach((ite,ind)=>{
           console.log(item,"内层item")
           console.log(ite,"内层ite")
           if (item.key == ite.key) {
             item.flag = true
           }
          
         })
    })
    this.setState({
      arr: this.state.arr
    })
  };

   componentDidMount(){
      axios.get("/list1").then(res=>{
        console.log(res.data.list);
        this.setState({
          arr:res.data.list
        })
      })
   }
  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div>
        {/* dataSource表示要渲染得数据 columns表示列 */}
        <Table columns={columns} dataSource={this.state.arr} rowSelection={rowSelection}/>
      </div>
    )
  }
}

export default Table1